<template>
	<div class="energystation">
		<div class="warning-top">
			<div class="warning-item">
				<div class="titles">
					<p>{{ cname }}一次接线图</p>
				</div>
				<div class="echats-con">
					<img
						src="./../../assets/img/yicijiexian.svg"
						alt=""
						style="height: 100%; width: 100%"
					/>
				</div>
			</div>
			<div class="warning-item">
				<div class="titles">
					<p>运行状态</p>
				</div>
				<div class="echats-con" style="overflow-y: auto">
					<div class="table-yysj">
						<div class="yysj-item flex">
							<div>间隔</div>
							<div>工作状态</div>
							<div>功率kW</div>
							<div>电量 SOC%</div>
						</div>
						<div
							class="yysj-item flex"
							v-for="(item, index) in unitTypeList"
							:key="index"
						>
							<div>{{ item.name }}</div>
							<div>{{ item.State | stateFilter }}</div>
							<div>{{ item.Preal | toFixed2Filter }}</div>
							<div>{{ item.SOC | toFixed2Filter }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="warning-top">
			<div class="warning-item">
				<div class="titles">
					<p>当日储能站有功功率和SOC统计</p>
				</div>
				<div class="echats-con">
					<dayGl :id="id" />
				</div>
			</div>
			<div class="warning-item">
				<div class="titles">
					<p>{{ cname }}站运行状态</p>
				</div>
				<div class="echats-con" style="overflow-y: auto">
					<div class="flex">
						<div class="yxzt">
							<xtxl
								:info="{
									minVal: 0,
									maxVal: 2,
									names: '可充电量',
									val: info.sum_charge_capacity.toFixed(2),
								}"
							/>
						</div>
						<div class="yxzt">
							<xtxl
								:info="{
									minVal: 0,
									maxVal: 2,
									names: '可放电量',
									val: info.sum_discharge_capacity.toFixed(2),
								}"
							/>
						</div>
						<div class="yxzt">
							<div class="imgs">
								<div
									class="conten"
									:style="{
										height: info.sum_soc * (52 / 100) + 'px',
										background: info.sum_soc > 60 ? '#29BC77' : '#FFC70E ',
									}"
								>
									<span> </span>
								</div>
							</div>
							<div class="yxzt_title">
								全站SOC
								<br />
								{{ info.sum_soc.toFixed(2) }}%
							</div>
						</div>
						<div class="yxzt">
							<div class="imgs">
								<div
									class="conten"
									:style="{
										height: info.sum_soh * (52 / 100) + 'px',
										background: info.sum_soh > 60 ? '#29BC77' : '#FFC70E ',
									}"
								></div>
							</div>
							<div class="yxzt_title">
								全站SOH <br />
								{{ info.sum_soh.toFixed(2) }}%
							</div>
						</div>
					</div>
					<div
						class="flex"
						style="flex-wrap: wrap; justify-content: space-between"
					>
						<div class="yxxx-item">
							<p>{{ info.current_power.toFixed(2) }}MW</p>
							<p>储能实时功率</p>
						</div>
						<div class="yxxx-item">
							<p>{{ info.times_maxpower_charge.toFixed(2) }}h</p>
							<p>最大功率充电时间</p>
						</div>
						<div class="yxxx-item">
							<p>{{ info.times_maxpower_discharge.toFixed(2) }}h</p>
							<p>最大功率放电时间</p>
						</div>
						<div class="yxxx-item">
							<p>{{ info.sum_capacity.toFixed(2) }}MWh</p>
							<p>全站总电量</p>
						</div>
					</div>
					<div
						class="flex"
						style="flex-wrap: wrap; justify-content: space-between"
					>
						<div class="yxxx-item">
							<p>{{ info.year_charged_ana.toFixed(2) }}MWh</p>
							<p>当年充电量</p>
						</div>
						<div class="yxxx-item">
							<p>{{ info.year_dischanged_ana.toFixed(2) }}MWh</p>
							<p>当年放电量</p>
						</div>
						<div class="yxxx-item">
							<p>{{ info.quantity_charged.toFixed(2) }}MWh</p>
							<p>总充电量MWh</p>
						</div>
						<div class="yxxx-item">
							<p>{{ info.quantity_discharged.toFixed(2) }}MWh</p>
							<p>总放电量MWh</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="warning-top">
			<div class="warning-item">
				<div class="titles">
					<p>全站当日可充容量和可放容量</p>
				</div>
				<div class="echats-con">
					<!-- <dayEarning :id="id" /> -->
					<allChange :id="id" />
				</div>
			</div>
			<div class="warning-item">
				<div class="titles">
					<p>充放电量</p>
				</div>
				<div class="echats-con">
					<dayCRDL :id="id" :cname="cname" />
				</div>
			</div>
		</div>
		<el-dialog
			:modal="false"
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			:before-close="handleClose"
			:title="dialogToele"
			:visible.sync="dialogVisible"
			width="489px"
		>
			<div class="contebt">
				<el-scrollbar class="scrollbar-wrapper" style="height: 100%">
					<div class="table-yysj">
						<div
							class="yysj-item flex"
							v-for="item in dialogList"
							:key="item.id"
						>
							<div style="flex: 2">{{ item.updateTime }}</div>
							<div style="flex: 3">{{ item.yxName }}</div>
						</div>
					</div>
				</el-scrollbar>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	alarmInformation,
	runningState,
	ycInfo,
	ycList,
	findUnitData,
} from "@/api/modules/energyunit";
import { findDataByDevIdAndName } from "@/api/modules/home";

import dayGl from "./components/dayGl.vue";
import allChange from "./components/allChange.vue";
import dayCRDL from "./components/dayCRDL.vue";
import xtxl from "./components/xtxl.vue";
import soc from "./components/soc.vue";
import soc1 from "./components/soc1.vue";

export default {
	components: { dayGl, allChange, dayCRDL, xtxl, soc, soc1 },
	props: {},
	data() {
		return {
			dialogVisible: false,
			dialogToele: "",
			dialogList: [],
			selectValue: "",
			info: {
				sum_charge_capacity: 0,
				sum_discharge_capacity: 0,
				sum_soc: 0,
				sum_soh: 0,
				current_power: 0,
				times_maxpower_charge: 0,
				times_maxpower_discharge: 0,
				sum_capacity: 0,
				year_charged_ana: 0,
				year_dischanged_ana: 0,
				quantity_charged: 0,
				quantity_discharged: 0,
			},
			cname: this.$route.query.name ? this.$route.query.name : "中航来宝",
			infoCNDy: [],
			timer: null,
			ycListARR: [],
			xData10: [],
			yData10: [],
			id: this.$route.query.id ? this.$route.query.id : "56857945295552513",
			unitTypeList: [],
		};
	},
	filters: {
		stateFilter(v) {
			if (v == 0) {
				return "静置";
			} else if (v == 1) {
				return "放电";
			} else if (v == 2) {
				return "充电";
			}
		},
		toFixed2Filter(v) {
			if (v) {
				return v.toFixed(2);
			} else {
				return v;
			}
		},
	},
	watch: {},
	computed: {
		ycListARR1() {
			let self = this;
			return this.ycListARR.filter(function (data) {
				//只返回id是偶数的
				if (self.selectValue) {
					return data.ycName.indexOf(self.selectValue) > -1;
				} else {
					return data;
				}
			});
		},
	},
	mounted() {
		// let id = this.$route.query.id ? this.$route.query.id : "56857945295552513";
		this.getDate(this.id);
		if (this.timer) {
			clearInterval(this.timer);
		} else {
			this.timer = setInterval(() => {
				this.getDate(this.id);
			}, 60000);
		}
	},
	methods: {
		handleClose() {
			this.dialogToele = "";
			this.dialogList = [];
			this.dialogVisible = false;
		},
		gjxxTC(index, name) {
			alarmInformation({ devId: this.info.id, type: index }).then((res) => {
				if (res.code == 200) {
					if (res.data.length == 0) {
						this.$Message({
							text: "暂无报警信息",
							type: "warning",
						});
					} else {
						this.dialogToele = name;
						this.dialogVisible = true;
						this.dialogList = res.data;
					}
				}
			});
		},
		getYCXX(item) {
			let self = this;
			this.yysj_itemActive = item.id;
			self.xData10 = [];
			self.yData10 = [];
			ycInfo({ devId: item.devId, sampleName: item.ycName }).then((res) => {
				let data = res.data;
				for (let index = 0; index < data.length; index++) {
					let element = data[index];
					self.xData10.push(element.date);
					self.yData10.push(element.ycHisDTOS ? element.ycHisDTOS.value : ""); //实时有效功率
				}
			});
		},
		getDate(id) {
			findDataByDevIdAndName({
				devId: id,
				sampleName:
					"sum_charge_capacity,sum_discharge_capacity,sum_soc,sum_soh,current_power,times_maxpower_charge,times_maxpower_discharge,sum_capacity,year_charged_ana,year_dischanged_ana,quantity_charged,quantity_discharged",
			}).then((res) => {
				if (res.code == 200) {
					this.info = res.data;
				}
			});
			runningState({ id: id }).then((res) => {
				if (res.code == 200) {
					this.infoCNDy = res.data;
				}
			});

			ycList({ devId: id }).then((res) => {
				if (res.code == 200) {
					this.ycListARR = res.data;
					if (this.ycListARR.length > 0) {
						this.getYCXX(this.ycListARR[0]);
					}
				}
			});

			findUnitData({
				subsId: id,
				sampleNameBms: "State,SOC",
				sampleNamePcs: "Preal",
			}).then((res) => {
				if (res.code == 200) {
					this.unitTypeList = res.data;
				}
			});
		},
	},
	destroyed() {
		clearInterval(this.timer); //页面销毁时清除定时器
	},
};
</script>
<style lang="scss">
.energystation {
	width: 100%;
	position: relative;
	/* height: 100%; */

	.warning-top {
		display: flex;
		justify-content: space-around;
		position: relative;
		gap: 40px 20px;
		margin-bottom: 20px;

		.warning-item {
			height: 330px;
			flex: 1;

			.echats-con {
				width: 100%;
				height: calc(100% - 52px);
				justify-content: space-around;

				.gif-img {
					height: 100%;
					margin: 0 50px;
				}

				.echats-xfxx1 {
					flex-wrap: wrap;

					.xfxx-item {
						margin: 10px 10px 0 10px;
						width: 160px;
						height: 30px;
						background: #29bc77;
						border-radius: 0px 0px 0px 0px;
						border: 1px solid #29bc77;
						position: relative;
						cursor: pointer;

						span {
							font-weight: 400;
							font-size: 14px;
							color: #ffffff;
							line-height: 30px;
							text-align: left;
							padding-left: 10px;
						}
					}

					.xfxx-itemred {
						background: rgba(128, 31, 1, 0.41);
						border-radius: 0px 0px 0px 0px;
						border: 1px solid rgba(128, 31, 1, 1);
					}
				}

				.yxxx-item {
					width: 160px !important;
					height: 94px;
					background: #05153c;
					border-radius: 4px 4px 4px 4px;
					margin-left: 10px;
					margin-top: 10px;

					p {
						text-align: center;

						&:first-child {
							height: 40px;
							font-weight: 500;
							font-size: 22px;
							color: #3fd1ff;
							line-height: 40px;
							margin-top: 15px;
						}

						&:last-child {
							height: 20px;
							font-weight: 300;
							font-size: 14px;
							color: #ffffff;
							line-height: 20px;
						}
					}
				}
				.yysj-item {
					div {
						text-align: center;
					}
				}
				.yysj-itemActive {
					background: #46559d;
				}

				.yxzt {
					margin: 5px;
					/* width: 117px; */
					flex: 1;
					height: 110px;
					background: rgba(4, 4, 4, 0.47);
					border-radius: 4px 4px 4px 4px;

					.yxzt_title {
						margin-top: 5px;
						height: 22px;
						font-size: 14px;
						color: #ffffff;
						line-height: 19px;
						text-align: center;
					}

					.imgs {
						height: 65px;
						width: 35px;
						margin: 5px auto;
						background-image: url(./../../assets/img/Group_3.png);
						background-size: cover;
						background-repeat: no-repeat;
						position: relative;

						.conten {
							width: 23px;
							/* background: #29BC77; */
							position: absolute;
							bottom: 5px;
							left: 6px;
							/* height: 80px; */
							text-align: center;

							span {
								position: absolute;
								font-size: 12px;
								color: #fff;
								bottom: 40px;
								left: 0;
								display: block;
								width: 50px;
								text-align: center;
								/* position: absolute;
                                top: -10px; */
							}
						}
					}
				}
			}
		}
	}

	.el-dialog {
		//弹框头部
		.el-dialog__header {
			padding: 0 !important;
			width: 100%;
			height: 38px;
			background: url(./../../assets/img/tcc1.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		//弹框标题
		.el-dialog__title {
			margin-left: 14px;
			line-height: 30px;
			color: #fff;
			font-size: 18px;
		}

		.el-dialog__headerbtn {
			top: 0;
			right: 2px;

			.el-dialog__close {
				color: #fff;
			}
		}

		//弹框内容部分
		.el-dialog__body {
			background: url(./../../assets/img/tcc2.png);
			background-repeat: no-repeat;
			background-size: 100% 100%;
			padding: 0;
			height: 502px;

			.contebt {
				padding: 15px 0;
				margin: 0 0;
				height: calc(100% - 30px);
				color: #fff;
			}
		}
	}
}
</style>
